﻿@using xConnected.Common.Login
@using xConnected.Common.ExpertProfile
<div class="row">
    <div class="span4">
        @Html.Partial("ExpertProfile/Partial/SearchSidebarProfileDetails")
    </div>
    <div class="span8">
        <div>
            <div data-bind="with:profile">
                <div data-bind="with: workingProfile">
                    <div class="well">
                        <div class="row-fluid">
                            <div class="span3"><img data-bind="attr: {src: $data.Photo()}" alt="Photo"></div>
                            <h3 id="NameProfileViewMode" data-bind="text: Title" class="span6"></h3>
                            <div data-bind="html: Description" class="span6"></div>
                        </div>
                    </div>
                    <div>
                        <hr/>
                        <span style="font-size: large">Expert information</span>
                        <hr/>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Country</strong></span>
                        <span class="span6" data-bind="with:Country"><span data-bind="text:Description"></span></span>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Location </strong></span>
                        <span data-bind="text: Location" class="span6"></span>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div style="height: 150px; width: 250px; margin-left: 240px; margin-bottom: 10px" id="locationProfileViewMode"></div>
            </div>
            <div data-bind="with:profile">
                <div data-bind="with: workingProfile">
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.AvailabilityStatus</strong></span>
                        <span data-bind="text: AvailabilityStatusText" class="span6"></span>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.EmploymentType </strong></span>
                        <span data-bind="text: JobTypeText" class="span6"/>
                    </div>
                    <div class="row-fluid" data-bind="visible: $root.profile.hourlyDailyRatesVisible">
                        <span class="span4" ><strong>@Resources.HourlyDailyRate </strong></span>
                        <span class="span6"><span data-bind="text: HourRate"></span>€ / <span data-bind="text: DailyRate"></span>€</span>
                    </div>
                    <div class="row-fluid" data-bind="visible: $root.profile.annualRatesVisible">
                        <span class="span4" ><strong>@Resources.MonthlyAnnualRate </strong></span>
                        <span class="span6"><span data-bind="text: MonthlyRate"></span>€ / <span data-bind="text: AnnualRate"></span>€</span>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.CommentRate </strong></span>
                        <span data-bind="text: CommentRate" class="span6"/>
                    </div>
                    <div>
                        <hr/>
                        <span style="font-size: large; margin-top: 20px">Skills</span>
                        <hr/>
                    </div>
                    <div class="row-fluid">
                        <span><strong class="span4">Education Skills</strong></span>
                        <ul data-bind="foreach: EducationSkills"class="unstyled">
                            <li class="row" style="margin-left: 20px"><button class="btn btn-mini"><span data-bind=" text: Program"></span><span>, </span><span data-bind=" text: University"></span></button></li>
                        </ul>
                    </div>
                    <div class="row-fluid">
                        <span><strong class="span4">Category Skills</strong></span>
                        <ul data-bind="foreach: CategorySkills"class="btn-toolbar btn-group">
                            <li style="margin-left: 20px" class="btn-group" ><a class="btn btn-mini"><span data-bind="text: CategoryName"></span> <span class= "badge" data-bind="text: Level, css: { 'badge badge-important': $data.Level == 1,'badge badge-warning': $data.Level == 2, 'badge badge-success': $data.Level == 3 }"></span></a></li>
                        </ul>
                    </div>
                    <div class="row-fluid">
                        <span><strong class="span4">@Resources.LanguageSkills</strong></span>
                        <ul data-bind="foreach: LanguageSkills"class="btn-toolbar btn-group">
                            <li style="margin-left: 20px" class="btn-group" ><button class="btn btn-mini"><span data-bind="text: LanguageName"></span> <span class= "badge" data-bind="text: Level, css: { 'badge badge-important': $data.Level == 1,'badge badge-warning': $data.Level == 2, 'badge badge-success': $data.Level == 3 }"></span></button></li>
                        </ul>
                    </div>
                    <div class="row-fluid">
                        <span><strong class="span4">@Resources.TechnologySkills</strong></span>
                        <ul data-bind="foreach: TechnologySkills"class="btn-toolbar btn-group">
                            <li style="margin-left: 20px" class="btn-group" ><button class="btn btn-mini"><span data-bind="text: TechnologyName"></span> <span class= "badge" data-bind="text: Level, css: { 'badge badge-important': $data.Level == 1,'badge badge-warning': $data.Level == 2, 'badge badge-success': $data.Level == 3 }"></span></button></li>
                        </ul>
                    </div>
                    <div>
                        <hr/>
                        <span style="font-size: large; margin-top: 20px">About me</span>
                        <hr/>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Abilities</strong></span>
                        <span data-bind="html: Experience" class="span6"></span>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.References</strong></span>
                        <span data-bind="html: References" class="span6"></span>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Availability</strong></span>
                        <span data-bind="html: Availability" class="span6"></span>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Other</strong></span>
                        <span data-bind="html: Other" class="span6"></span>
                    </div>
                    <div>
                        <hr/>
                        <span style="font-size: large; margin-top: 20px">Attachments</span>
                        <hr/>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Cv </strong></span>
                        <div class="span6"><a data-bind="attr: { href: Cv}"><span data-bind="text: $root.profile.cvShort" /></a></div>
                    </div>
                    <hr/>
                    <span style="font-size: large; margin-top: 20px">Contact information</span>
                    <hr/>
                    <div class="row-fluid">
                        <span class="span4"><strong>Phone number</strong></span>
                        <span data-bind="text: PhoneNumber" class="span6"/>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Login.Email </strong></span>
                        <span data-bind="text: Email" class="span6"></span>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Website </strong></span>
                        <a href="#" data-bind="text: Website, attr: {href: Website}" class="span6"></a>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Skype </strong></span>
                        <span data-bind="text: Skype" class="span6"/>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Facebook </strong></span>
                        <span data-bind="text: Facebook" class="span6"/>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Twitter </strong></span>
                        <span data-bind="text: Twitter" class="span6"/>
                    </div>
                    <div class="row-fluid">
                        <span class="span4"><strong>@Resources.Linkedin </strong></span>
                        <span data-bind="text: Linkedin" class="span6"/>
                    </div>
            
                </div>
            </div>
        </div>
    </div>
</div>